<template>
  <div class="wap">
    <div class="login">
      <div class="user">
        <span>用户名:</span>
        <input :class="usersty ? 'stress':''"
               type="text"
               v-model="user"
               disabled>
      </div>
      <div class="user">
        <span>手机号:</span>
        <input :class="phonesty ? 'stress':''"
               type="text"
               v-model="phone"
               @click="inputClick(3)"
               placeholder="请输入您的手机号">
      </div>
      <div class="sex">
        <span>性&nbsp;&nbsp;&nbsp;&nbsp;别:</span>
        <el-radio-group v-model="sex">
          <el-radio value="男"
                    size="large">男</el-radio>
          <el-radio value="女"
                    size="large">女</el-radio>
        </el-radio-group>
      </div>
      <div class="head_img">
        <span>选择您的头像:</span>
        <img :src="aa_image"
             alt=""
             v-if="files.length==0">
        <div>
          <el-upload ref="uploadRef"
                     v-model:file-list="files"
                     :action="`http://localhost:3000/api/upload?username=${user}`"
                     list-type="picture-card"
                     :on-preview="handlePictureCardPreview"
                     :on-remove="handleRemove"
                     :limit="1"
                     name="files"
                     :auto-upload="false">
            <!-- <el-button type="primary"> -->
            <el-icon>
              <Plus />
            </el-icon>
            <!-- </el-button> -->
          </el-upload>

          <el-dialog v-model="dialogVisible">
            <img width="100%"
                 :src="dialogImageUrl"
                 alt="" />
          </el-dialog>

        </div>
      </div>
      <div>
        <button class="login_but"
                @click="xiugai">修改</button>
        <button class="register_but"
                @click="back_login">返回</button>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import axios from '@/axios'
import { useRouter } from 'vue-router'
// import bus from '@/bus'
// import { useCounterStore } from '@/stores/ceshi'
import { ElMessage } from 'element-plus'
export default {
  setup() {
    //路由跳转
    const router = useRouter()
    //用户名
    let user = ref('')
    // const userName = /^[A-Za-z0-9]{5,12}$/
    //密码
    let pwd = ref('')
    // const pwdName = /^(?=.*[0-9])(?=.*[a-zA-Z]).{6,12}$/
    //验证码
    let verify_pwd = ref('')
    //眼睛
    let show1 = ref(true)
    let show2 = ref(true)
    //功能
    let feature = ref('')
    //性别
    let sex = ref('男')
    //手机号
    let phone = ref('')
    const phoneName = /^1[3456789]\d{9}$/
    //错误提示语
    let useMsg = function (a, b) {
      return ElMessage({
        message: a,
        type: b,
        offset: 150,
        duration: 5000,
        center: true
      })
    }
    //账号错误输入框提示
    let usersty = ref(false)
    //密码错误输入框提示
    let pwdsty = ref(false)
    //确认密码错误输入框提示
    let verify_pwdsty = ref(false)
    //手机号错误输入框提示
    let phonesty = ref(false)
    //点击输入框去除提示
    const inputClick = (a) => {
      if (a == 0) {
        usersty.value = false
      } else if (a == 1) {
        pwdsty.value = false
      } else if (a == 2) {
        verify_pwdsty.value = false
      } else {
        phonesty.value = false
      }
    }

    //获取数据
    onMounted(() => {
      huoqu()
    })
    let names = localStorage.getItem('username')
    const huoqu = async () => {
      axios
        .get('user', { username: names })
        .then((d) => {
          // console.log(d)
          user.value = d[0].username
          sex.value = d[0].gender
          aa_image.value = d[0].head_img
          phone.value = d[0].phone
          // console.log(sex.value)
        })
        .catch((err) => {
          console.log(err)
        })
    }
    //文件列表
    let aa_image = ref('')
    let uploadRef = ref(null)
    let files = ref([])
    //ref绑定，可以访问el-upload自己的方法

    //预览图片文件名
    let dialogImageUrl = ref('')
    //预览展示
    let dialogVisible = ref(false)
    //删除已选择的文件
    let handleRemove = () => {
      // console.log(file, fileList)
      // 可以在这里添加额外的删除逻辑，比如从服务器删除文件等
    }

    //从列表赋值给预览图片
    let handlePictureCardPreview = (file) => {
      // console.log('dyffgvuuhiougygou8')
      dialogImageUrl.value = file.url
      dialogVisible.value = true
    }
    const submitUpload = () => {
      if (uploadRef.value && typeof uploadRef.value.submit === 'function') {
        uploadRef.value.submit()
      } else {
        console.error(
          'Upload component instance is not available or does not have a submit method.'
        )
      }
    }
    //返回登录页
    const back_login = () => {
      // console.log('jhfjhdrtu')
      router.go(-1)
      setTimeout(() => {
        location.reload()
      }, 100)
    }

    //个人中心
    const xiugai = () => {
      if (phoneName.test(phone.value)) {
        axios
          .post('xiuxi', {
            username: user.value,
            gender: sex.value,
            phone: phone.value
          })
          .then((d) => {
            if (d == '修改成功') {
              useMsg('个人信息修改成功！', 'success')
              if (files.value.length > 0) {
                submitUpload()
                // files.value = []
              }
              huoqu()
            } else {
              useMsg('修改失败', 'error')
            }
          })
          .catch((err) => {
            console.log(err)
          })
      } else {
        phonesty.value = true
        useMsg('手机号错误,请输入正确的手机号', 'error')
      }
    }
    return {
      user,
      pwd,
      verify_pwd,
      back_login,
      show1,
      show2,
      useMsg,
      usersty,
      pwdsty,
      verify_pwdsty,
      inputClick,
      feature,
      phone,
      phonesty,
      sex,
      uploadRef,
      dialogImageUrl,
      dialogVisible,
      handlePictureCardPreview,
      handleRemove,
      files,
      xiugai,
      huoqu,
      aa_image
    }
  }
}
</script>
<style lang="less" scoped>
.wap {
  width: 100vw;
  height: 100vh;
  min-width: 1200px;
  // background: url(/imgs/000.gif) no-repeat;
  // background-size: cover;
  background-image: linear-gradient(to bottom right, #f8f1c7, #eeecde);
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5;
  .login {
    width: 800px;
    background-image: linear-gradient(
      to bottom,
      rgba(249, 239, 241, 0.8),
      rgba(255, 255, 255, 0.8)
    );
    border: 1px solid #ccc;
    border-radius: 10% 25%;
    border-bottom: #cdbf62 8px solid;
    border-left: #cdbf62 8px solid;
    border-right: #cdbf62 8px dashed;
    border-top: #cdbf62 8px dashed;
    padding: 20px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
    .user {
      width: 450px;
      height: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 10px 0;
      span {
        width: 90px;
        text-align: center;
      }
    }
    .sex {
      width: 450px;
      height: 50px;
      display: flex;

      // justify-content: space-between;
      align-items: center;
      span {
        width: 90px;
        text-align: center;
      }
    }
    input {
      width: 360px;
      border: 1px solid #ccc;
      height: 30px;
      border-radius: 5px;
    }
    input:focus {
      border: 1px solid #333;
      outline: none; //这个可以把原来的线去掉
    }
    .stress {
      width: 360px;
      border: 2px solid #e90505;
      height: 30px;
      border-radius: 5px;
    }
    .pwd {
      width: 450px;
      height: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      // margin: 20px 0 0 0;
      margin: 10px 0;
      position: relative;
      span {
        width: 90px;
        text-align: center;
      }
      img {
        width: 25px;
        height: 20px;
        position: absolute;
        right: 5px;
        top: 15px;
      }
    }
    .head_img {
      width: 450px;
      display: flex;
      margin: 10px 0;
      span {
        margin-right: 20px;
      }
      img {
        width: 146px;
        height: 146px;
        border-radius: 5px;
        margin-right: 5px;
      }
    }
    button {
      width: 100px;
      height: 30px;
      margin: 0 15px;
      cursor: pointer;
    }
    .login_but {
      background-color: #f8f1c7;
    }
  }
  /**分割线**/
  .login1 {
    width: 500px;
    background-image: linear-gradient(
      to bottom,
      rgba(249, 239, 241, 0.8),
      rgba(255, 255, 255, 0.8)
    );
    border: 1px solid #ccc;
    border-radius: 10% 25%;
    border-bottom: #cdbf62 8px solid;
    border-left: #cdbf62 8px solid;
    border-right: #cdbf62 8px dashed;
    border-top: #cdbf62 8px dashed;
    padding: 20px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
    .div_kuan {
      width: 450px;
      font-size: 20px;
      margin: 10px 0;
    }
    .head_img {
      display: flex;
      justify-content: unsafe;
      img {
        width: 100px;
      }
    }
    .but {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    button {
      width: 100px;
      height: 30px;
      margin: 0 15px;
      cursor: pointer;
    }
    .login_but {
      background-color: #f8f1c7;
    }
  }
}
</style>